﻿var ws; // used to create an object of websocket
var WriteLog = ""; // use to write a log
var LogContainer = document.getElementById("LogContainer"); // find log container div
var hfieldSelectedTab = document.getElementById("hfieldSelectedTab"); // Get selected tab

// defining color skeleton
var Color1Dark = "#bc1010";
var Color1Light = "#d45454";
var Color2Dark = "#61ba0b";
var Color2Light = "#93d454";
var Color3Dark = "#0c6994";
var Color3Light = "#579ebf";
var Color4Dark = "#af9508";
var Color4Light = "#d1bd4f";

//Head Joints Vaiables
var tdHeadJointID = document.getElementById("tdHeadJointID");
var tdHeadW = document.getElementById("tdHeadW");
var tdHeadX = document.getElementById("tdHeadX");
var tdHeadY = document.getElementById("tdHeadY");
var tdHeadZ = document.getElementById("tdHeadZ");
var tdHeadRX = document.getElementById("tdHeadRX");
var tdHeadRY = document.getElementById("tdHeadRY");

//Neck Joints Vaiables
var tdNeckJointID = document.getElementById("tdNeckJointID");
var tdNeckW = document.getElementById("tdNeckW");
var tdNeckX = document.getElementById("tdNeckX");
var tdNeckY = document.getElementById("tdNeckY");
var tdNeckZ = document.getElementById("tdNeckZ");
var tdNeckRX = document.getElementById("tdNeckRX");
var tdNeckRY = document.getElementById("tdNeckRY");

//Spine Joints Vaiables
var tdSpineJointID = document.getElementById("tdSpineJointID");
var tdSpineW = document.getElementById("tdSpineW");
var tdSpineX = document.getElementById("tdSpineX");
var tdSpineY = document.getElementById("tdSpineY");
var tdSpineZ = document.getElementById("tdSpineZ");
var tdSpineRX = document.getElementById("tdSpineRX");
var tdSpineRY = document.getElementById("tdSpineRY");

//HipCenter Joints Vaiables
var tdHipCenterJointID = document.getElementById("tdHipCenterJointID");
var tdHipCenterW = document.getElementById("tdHipCenterW");
var tdHipCenterX = document.getElementById("tdHipCenterX");
var tdHipCenterY = document.getElementById("tdHipCenterY");
var tdHipCenterZ = document.getElementById("tdHipCenterZ");
var tdHipCenterRX = document.getElementById("tdHipCenterRX");
var tdHipCenterRY = document.getElementById("tdHipCenterRY");

//Shoulder Left Joints Vaiables
var tdShoulderLeftJointID = document.getElementById("tdShoulderLeftJointID");
var tdShoulderLeftW = document.getElementById("tdShoulderLeftW");
var tdShoulderLeftX = document.getElementById("tdShoulderLeftX");
var tdShoulderLeftY = document.getElementById("tdShoulderLeftY");
var tdShoulderLeftZ = document.getElementById("tdShoulderLeftZ");
var tdShoulderLeftRX = document.getElementById("tdShoulderLeftRX");
var tdShoulderLeftRY = document.getElementById("tdShoulderLeftRY");

//Elbow Left Joints Vaiables
var tdElbowLeftJointID = document.getElementById("tdElbowLeftJointID");
var tdElbowLeftW = document.getElementById("tdElbowLeftW");
var tdElbowLeftX = document.getElementById("tdElbowLeftX");
var tdElbowLeftY = document.getElementById("tdElbowLeftY");
var tdElbowLeftZ = document.getElementById("tdElbowLeftZ");
var tdElbowLeftRX = document.getElementById("tdElbowLeftRX");
var tdElbowLeftRY = document.getElementById("tdElbowLeftRY");

//Wrist Left Joints Vaiables
var tdWristLeftJointID = document.getElementById("tdWristLeftJointID");
var tdWristLeftW = document.getElementById("tdWristLeftW");
var tdWristLeftX = document.getElementById("tdWristLeftX");
var tdWristLeftY = document.getElementById("tdWristLeftY");
var tdWristLeftZ = document.getElementById("tdWristLeftZ");
var tdWristLeftRX = document.getElementById("tdWristLeftRX");
var tdWristLeftRY = document.getElementById("tdWristLeftRY");

//Hand Left Joints Vaiables
var tdHandLeftJointID = document.getElementById("tdHandLeftJointID");
var tdHandLeftW = document.getElementById("tdHandLeftW");
var tdHandLeftX = document.getElementById("tdHandLeftX");
var tdHandLeftY = document.getElementById("tdHandLeftY");
var tdHandLeftZ = document.getElementById("tdHandLeftZ");
var tdHandLeftRX = document.getElementById("tdHandLeftRX");
var tdHandLeftRY = document.getElementById("tdHandLeftRY");


//Shoulder Right Joints Vaiables
var tdShoulderRightJointID = document.getElementById("tdShoulderRightJointID");
var tdShoulderRightW = document.getElementById("tdShoulderRightW");
var tdShoulderRightX = document.getElementById("tdShoulderRightX");
var tdShoulderRightY = document.getElementById("tdShoulderRightY");
var tdShoulderRightZ = document.getElementById("tdShoulderRightZ");
var tdShoulderRightRX = document.getElementById("tdShoulderRightRX");
var tdShoulderRightRY = document.getElementById("tdShoulderRightRY");

//Elbow Right Joints Vaiables
var tdElbowRightJointID = document.getElementById("tdElbowRightJointID");
var tdElbowRightW = document.getElementById("tdElbowRightW");
var tdElbowRightX = document.getElementById("tdElbowRightX");
var tdElbowRightY = document.getElementById("tdElbowRightY");
var tdElbowRightZ = document.getElementById("tdElbowRightZ");
var tdElbowRightRX = document.getElementById("tdElbowRightRX");
var tdElbowRightRY = document.getElementById("tdElbowRightRY");

//Wrist Right Joints Vaiables
var tdWristRightJointID = document.getElementById("tdWristRightJointID");
var tdWristRightW = document.getElementById("tdWristRightW");
var tdWristRightX = document.getElementById("tdWristRightX");
var tdWristRightY = document.getElementById("tdWristRightY");
var tdWristRightZ = document.getElementById("tdWristRightZ");
var tdWristRightRX = document.getElementById("tdWristRightRX");
var tdWristRightRY = document.getElementById("tdWristRightRY");

//Wrist Right Joints Vaiables
var tdHandRightJointID = document.getElementById("tdHandRightJointID");
var tdHandRightW = document.getElementById("tdHandRightW");
var tdHandRightX = document.getElementById("tdHandRightX");
var tdHandRightY = document.getElementById("tdHandRightY");
var tdHandRightZ = document.getElementById("tdHandRightZ");
var tdHandRightRX = document.getElementById("tdHandRightRX");
var tdHandRightRY = document.getElementById("tdHandRightRY");

//Hip Left Joints Vaiables
var tdHipLeftJointID = document.getElementById("tdHipLeftJointID");
var tdHipLeftW = document.getElementById("tdHipLeftW");
var tdHipLeftX = document.getElementById("tdHipLeftX");
var tdHipLeftY = document.getElementById("tdHipLeftY");
var tdHipLeftZ = document.getElementById("tdHipLeftZ");
var tdHipLeftRX = document.getElementById("tdHipLeftRX");
var tdHipLeftRY = document.getElementById("tdHipLeftRY");

//Knee Left Joints Vaiables
var tdKneeLeftJointID = document.getElementById("tdKneeLeftJointID");
var tdKneeLeftW = document.getElementById("tdKneeLeftW");
var tdKneeLeftX = document.getElementById("tdKneeLeftX");
var tdKneeLeftY = document.getElementById("tdKneeLeftY");
var tdKneeLeftZ = document.getElementById("tdKneeLeftZ");
var tdKneeLeftRX = document.getElementById("tdKneeLeftRX");
var tdKneeLeftRY = document.getElementById("tdKneeLeftRY");

//Ankle Left Joints Vaiables
var tdAnkleLeftJointID = document.getElementById("tdAnkleLeftJointID");
var tdAnkleLeftW = document.getElementById("tdAnkleLeftW");
var tdAnkleLeftX = document.getElementById("tdAnkleLeftX");
var tdAnkleLeftY = document.getElementById("tdAnkleLeftY");
var tdAnkleLeftZ = document.getElementById("tdAnkleLeftZ");
var tdAnkleLeftRX = document.getElementById("tdAnkleLeftRX");
var tdAnkleLeftRY = document.getElementById("tdAnkleLeftRY");

//Foot Left Joints Vaiables
var tdFootLeftJointID = document.getElementById("tdFootLeftJointID");
var tdFootLeftW = document.getElementById("tdFootLeftW");
var tdFootLeftX = document.getElementById("tdFootLeftX");
var tdFootLeftY = document.getElementById("tdFootLeftY");
var tdFootLeftZ = document.getElementById("tdFootLeftZ");
var tdFootLeftRX = document.getElementById("tdFootLeftRX");
var tdFootLeftRY = document.getElementById("tdFootLeftRY");

//Hip Right Joints Vaiables
var tdHipRightJointID = document.getElementById("tdHipRightJointID");
var tdHipRightW = document.getElementById("tdHipRightW");
var tdHipRightX = document.getElementById("tdHipRightX");
var tdHipRightY = document.getElementById("tdHipRightY");
var tdHipRightZ = document.getElementById("tdHipRightZ");
var tdHipRightRX = document.getElementById("tdHipRightRX");
var tdHipRightRY = document.getElementById("tdHipRightRY");

//Knee Right Joints Vaiables
var tdKneeRightJointID = document.getElementById("tdKneeRightJointID");
var tdKneeRightW = document.getElementById("tdKneeRightW");
var tdKneeRightX = document.getElementById("tdKneeRightX");
var tdKneeRightY = document.getElementById("tdKneeRightY");
var tdKneeRightZ = document.getElementById("tdKneeRightZ");
var tdKneeRightRX = document.getElementById("tdKneeRightRX");
var tdKneeRightRY = document.getElementById("tdKneeRightRY");

//Ankle Right Joints Vaiables
var tdAnkleRightJointID = document.getElementById("tdAnkleRightJointID");
var tdAnkleRightW = document.getElementById("tdAnkleRightW");
var tdAnkleRightX = document.getElementById("tdAnkleRightX");
var tdAnkleRightY = document.getElementById("tdAnkleRightY");
var tdAnkleRightZ = document.getElementById("tdAnkleRightZ");
var tdAnkleRightRX = document.getElementById("tdAnkleRightRX");
var tdAnkleRightRY = document.getElementById("tdAnkleRightRY");

//Foot Right Joints Vaiables
var tdFootRightJointID = document.getElementById("tdFootRightJointID");
var tdFootRightW = document.getElementById("tdFootRightW");
var tdFootRightX = document.getElementById("tdFootRightX");
var tdFootRightY = document.getElementById("tdFootRightY");
var tdFootRightZ = document.getElementById("tdFootRightZ");
var tdFootRightRX = document.getElementById("tdFootRightRX");
var tdFootRightRY = document.getElementById("tdFootRightRY");


// This method is used to establish connection with web socket server
function WSConnection(WSURLandPort) {
    try {
        var WebSocketsExist = true; // Used to check browser supports WebSocket or not
        try {
            ws = new WebSocket("ws://" + WSURLandPort);  // create a websocket object and give websocket server url to establish connection
        } catch (ex) {
            WebSocketsExist = false; // browser does not supports WebSocket

        }
        if (WebSocketsExist == true) {
            Log("Your browser supports Web Sockets.", "OK");

        } else {
            Log("Your browser does not support Web Sockets.", "ERROR");
            return;
        }

        ws.onopen = WSonOpen; // Binding websocket connection open method
        ws.onmessage = WSonMessage; // Binding websocket message recieve method
        ws.onclose = WSonClose; // Binding websocket connection close method
        ws.onerror = WSonError; // Binding websocket error method
    } catch (ex) {
        Log(ex, "ERROR");
    }
};

// this method is call when successfull connection is established
function WSonOpen() {
    try {
        //client connection is open with server
        if (ws.readyState == 1) {
            Log("Connection established.", "OK");
            var hfieldIsAuthincate = document.getElementById("hfieldIsAuthincate"); // find hidden field contol
            if (hfieldIsAuthincate.value != "true") {   // check user is authincated or not
                AuthincateUser(); // authincate user with the server
            }
        }
    } catch (ex) {
        Log(ex, "ERROR");
    }
};

// used to draw line between joints
function Drawline(linestart, lineend, BoneColor) {
    try {
        var canvas = document.getElementById('myDrawing');
        // use getContext to use the canvas for drawing
        var splitXY = new Array();
        splitXY = linestart.split(",");
        var NextXY = new Array();
        NextXY = lineend.split(",");
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(splitXY[5], splitXY[6]);
        //ctx.moveTo(X0, Y0);            
        ctx.lineTo(NextXY[5], NextXY[6]);
        //ctx.lineTo(X1, Y1);
        ctx.lineWidth = 5;
        ctx.strokeStyle = BoneColor; // line color
        ctx.lineCap = "round";
        ctx.stroke();
    } catch (ex) {
        Log(ex, "ERROR");
    }
}
// this method is call when client received data from websocket server
function WSonMessage(event) {
    try {
        var kinectDeviceName = ""; // Used to get Kinect Device Name
        var ImageResolution = ""; // Used for Image Resolution
        var imgString = ""; // used to write image string        
        // get the canvas element using the DOM
        var canvas = document.getElementById('myDrawing');
        var hfieldIsAuthincate = document.getElementById("hfieldIsAuthincate"); // find hidden field control
        var SplitData = new Array();    // Array is used to split data
        if (event.data != "") {
            SplitData = event.data.split("\n"); // split the received data with \n        

            // if 1st character is 1 then color Image
            // if 1st character is 2 then depth Image
            // if 1st character is 3 then skeleton data
            // if 1st character is 5 then User authenticated

            if (SplitData.length > 0) { // if array length is greater then 0
                if (SplitData[0] == "5")  // Authentication reply for web socket server
                {
                    var Authincation = false;   // set Authincation to false
                    var reason = "";
                    if (SplitData.length > 1) {
                        Authincation = SplitData[1];
                        if (Authincation != "True") {
                            Log("User is not authenticated by server", "ERROR");
                        }
                        hfieldIsAuthincate.value = SplitData[1];
                    }

                    if (Authincation != "True") {
                        if (SplitData.length > 2) {
                            reason = SplitData[2];
                            Log(reason, "ERROR");
                        }
                    }
                }
                if (hfieldIsAuthincate.value == "True") {
                    if (SplitData[0] == "1")  // for color image
                    {
                        // Parsing  Color Image data

                        if (SplitData.length > 1) {
                            kinectDeviceName = SplitData[1].toString(); // Get Kinect Device Name                 
                        }
                        if (SplitData.length > 2) {
                            ImageResolution = SplitData[2].toString();  // Get Image Resolution                        
                        }
                        if (SplitData.length > 3) {
                            imgString = SplitData[3].toString();  // Get Image String in Base 64                      
                        }
                    }
                    else if (SplitData[0] == "2")  // for depth image
                    {
                        // Parsing depth Image Data                                        

                        var BytePerPixel = ""; // Bytes Per Pixel Used in Image
                        var WidthHeight = ""; // Width and height of Image
                        var BinaryData = ""; // Binary data of Image

                        if (SplitData.length > 1) {
                            kinectDeviceName = SplitData[1].toString(); // Get Kinect device name                        
                        }
                        if (SplitData.length > 2) {
                            ImageResolution = SplitData[2].toString(); // Get Image Resolution                        
                        }
                        if (SplitData.length > 3) {
                            imgString = SplitData[3].toString(); // Get Image String in base 64                   
                        }

                        if (SplitData.length > 4) {
                            BytePerPixel = SplitData[4]; // Bytes per pixel used in image to display one pixel                        
                        }

                        if (SplitData.length > 5) {
                            WidthHeight = SplitData[5]; // Width and Height of Image                        
                        }

                        if (SplitData.length > 6) {
                            BinaryData = SplitData[6]; // Get Binary data of image                        
                        }
                    }

                    else if (SplitData[0] == "3")  // for Skeleton Data
                    {
                        // Parsing Skeleton data
                        var NoOfSkeleton;
                        var ImageResolution;
                        var ctx = canvas.getContext('2d');
                        ctx.clearRect(0, 0, canvas.width, canvas.height);

                        if (SplitData.length > 1) {
                            kinectDeviceName = SplitData[1].toString(); // Get Kinect device name                        
                        }
                        if (SplitData.length > 2) {
                            ImageResolution = SplitData[2].toString(); // Get Image Resolution                                                    
                            var splitWidthHeight = SplitData[2].split(",");
                            canvas.width = splitWidthHeight[0];
                            canvas.height = splitWidthHeight[1];
                        }
                        if (SplitData.length > 3) {
                            NoOfSkeleton = SplitData[3].toString(); // Get No of skeleton in image                        
                        }



                        // Number of Skeleton
                        for (i = 0; i < NoOfSkeleton; i++) {
                            var skeletonData = SplitData[3 + i]; // Split skeletopn point                        
                            var SplitHumanSkeleton = new Array();
                            if (SplitData[4 + i].toString() != "") {
                                SplitHumanSkeleton = SplitData[4 + i].split("$");
                                var TrackingID; // Image Tracking ID
                                var UserID;     // Image User ID    
                                var Qualiuty;   // Image Quality
                                var NoOfJoints; // Number of Joints in image

                                // Assign color to skeleton

                                var JointColor = "";
                                var BoneColor = "";
                                if (i == 0) {
                                    JointColor = Color1Dark;
                                    BoneColor = Color1Light;
                                }
                                else if (i == 1) {
                                    JointColor = Color2Dark;
                                    BoneColor = Color2Light;
                                }
                                else if (i == 2) {
                                    JointColor = Color3Dark;
                                    BoneColor = Color3Light;
                                }
                                else {
                                    JointColor = Color4Dark;
                                    BoneColor = Color4Light;
                                }


                                if (SplitHumanSkeleton.length > 0) {
                                    TrackingID = SplitHumanSkeleton[0].toString(); // Get Tracking id of Image                            
                                }
                                if (SplitHumanSkeleton.length > 1) {
                                    UserID = SplitHumanSkeleton[1].toString(); // Get Skeleton User ID                            
                                }
                                if (SplitHumanSkeleton.length > 2) {
                                    Qualiuty = SplitHumanSkeleton[2].toString();    // Get Image Quality                            
                                }

                                if (SplitHumanSkeleton.length > 3) {
                                    NoOfJoints = SplitHumanSkeleton[3].toString();  // Number of Joints in image

                                    var totalJoint = parseInt(NoOfJoints) + 4;
                                    // Skeleton Bones data

                                    for (k = 4; k < totalJoint; k++) {
                                        var splitXY = new Array(); // Split Skeleton Points
                                        if (SplitHumanSkeleton[k].toString() != "") {
                                            splitXY = SplitHumanSkeleton[k].split(",");


                                            // For Canvas Working Code
                                            //if (rdbVisualSkeleton.checked == true) {
                                            if (hfieldSelectedTab.value == "2") {
                                                //if (canvas.getContext) {
                                                if (totalJoint == 24) { // if data of all joints are recievied then draw skeleton
                                                    if (k + 1 < totalJoint) {
                                                        var NextXY = new Array();
                                                        NextXY = SplitHumanSkeleton[k + 1].split(",");
                                                        // drawing Skeleton
                                                        if (k < 7) // backbone to head
                                                            Drawline(SplitHumanSkeleton[k], SplitHumanSkeleton[k + 1], BoneColor);
                                                        else if (k == 8 || k == 12) { // heck to shoulder
                                                            Drawline(SplitHumanSkeleton[6], SplitHumanSkeleton[k], BoneColor);
                                                            Drawline(SplitHumanSkeleton[k], SplitHumanSkeleton[k + 1], BoneColor);
                                                        }
                                                        else if (k == 16 || k == 20) { // hip center to legs
                                                            Drawline(SplitHumanSkeleton[4], SplitHumanSkeleton[k], BoneColor);
                                                            Drawline(SplitHumanSkeleton[k], SplitHumanSkeleton[k + 1], BoneColor);
                                                        }
                                                        else if (k > 8 && k < 11) // left arm to hand
                                                            Drawline(SplitHumanSkeleton[k], SplitHumanSkeleton[k + 1], BoneColor);
                                                        else if (k > 12 && k < 15) // right arm to hand
                                                            Drawline(SplitHumanSkeleton[k], SplitHumanSkeleton[k + 1], BoneColor);
                                                        else if (k > 16 && k < 19) // left leg to foot
                                                            Drawline(SplitHumanSkeleton[k], SplitHumanSkeleton[k + 1], BoneColor);
                                                        else if (k > 20 && k < 23) // right leg to foot
                                                            Drawline(SplitHumanSkeleton[k], SplitHumanSkeleton[k + 1], BoneColor);
                                                    }
                                                }

                                                //draw Joints                   
                                                ctx.fillStyle = JointColor;
                                                ctx.beginPath();
                                                //ctx.arc(splitXY[5], splitXY[6], 3, 0, Math.PI * 2, true);
                                                ctx.arc(parseFloat(splitXY[5]), parseFloat(splitXY[6]), 4, 0, Math.PI * 2, true);

                                                ctx.closePath();
                                                ctx.fill();

                                            }
                                            else {
                                                //}

                                                if (splitXY.length > 0) {
                                                    if (splitXY[0] == "0") { // Get Hip Center Point
                                                        tdHipCenterJointID.innerHTML = splitXY[0]; // Hip Center Joint value
                                                        tdHipCenterW.innerHTML = "";
                                                        tdHipCenterX.innerHTML = "";
                                                        tdHipCenterY.innerHTML = "";
                                                        tdHipCenterZ.innerHTML = "";
                                                        tdHipCenterRX.innerHTML = "";
                                                        tdHipCenterRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdHipCenterW.innerHTML = splitXY[1]; // Hip Center W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdHipCenterX.innerHTML = splitXY[2]; // Hip Center X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdHipCenterY.innerHTML = splitXY[3]; // Hip Center Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdHipCenterZ.innerHTML = splitXY[4]; // Hip Center Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdHipCenterRX.innerHTML = splitXY[5]; // Hip Center RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdHipCenterRY.innerHTML = splitXY[6]; // Hip Center RY value
                                                        }

                                                    }

                                                    else if (splitXY[0] == "1") { // Get Spine Point
                                                        tdSpineJointID.innerHTML = splitXY[0]; // Spine Joint value
                                                        tdSpineW.innerHTML = "";
                                                        tdSpineX.innerHTML = "";
                                                        tdSpineY.innerHTML = "";
                                                        tdSpineZ.innerHTML = "";
                                                        tdSpineRX.innerHTML = "";
                                                        tdSpineRY.innerHTML = "";
                                                        if (splitXY.length > 1) {
                                                            tdSpineW.innerHTML = splitXY[1]; // Spine W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdSpineX.innerHTML = splitXY[2]; // Spine X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdSpineY.innerHTML = splitXY[3]; // Spine Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdSpineZ.innerHTML = splitXY[4]; // Spine Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdSpineRX.innerHTML = splitXY[5]; // Spine RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdSpineRY.innerHTML = splitXY[6]; // Spine RY value
                                                        }

                                                    }
                                                    else if (splitXY[0] == "2") { // Get Shoulder Center  Point
                                                        tdNeckJointID.innerHTML = splitXY[0]; // Hip Center Joint value
                                                        tdNeckW.innerHTML = "";
                                                        tdNeckX.innerHTML = "";
                                                        tdNeckY.innerHTML = "";
                                                        tdNeckZ.innerHTML = "";
                                                        tdNeckRX.innerHTML = "";
                                                        tdNeckRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdNeckW.innerHTML = splitXY[1]; // Shoulder Center W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdNeckX.innerHTML = splitXY[2]; // Shoulder Center X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdNeckY.innerHTML = splitXY[3]; // Shoulder Center Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdNeckZ.innerHTML = splitXY[4]; // Shoulder Center Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdNeckRX.innerHTML = splitXY[5]; // Shoulder Center RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdNeckRY.innerHTML = splitXY[6]; // Shoulder Center RY value
                                                        }

                                                    }
                                                    else if (splitXY[0] == "3") { // Get Head  Point
                                                        tdHeadJointID.innerHTML = splitXY[0]; // Head Joint value
                                                        tdHeadW.innerHTML = "";
                                                        tdHeadX.innerHTML = "";
                                                        tdHeadY.innerHTML = "";
                                                        tdHeadZ.innerHTML = "";
                                                        tdHeadRX.innerHTML = "";
                                                        tdHeadRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdHeadW.innerHTML = splitXY[1]; // Head W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdHeadX.innerHTML = splitXY[2]; // Head X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdHeadY.innerHTML = splitXY[3]; // Head Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdHeadZ.innerHTML = splitXY[4]; // Head Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdHeadRX.innerHTML = splitXY[5]; // Head RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdHeadRY.innerHTML = splitXY[6]; // Head RY value
                                                        }

                                                    }
                                                    else if (splitXY[0] == "4") { // Get Shoulder Left   Point
                                                        tdShoulderLeftJointID.innerHTML = splitXY[0]; // Shoulder Left  Joint value
                                                        tdShoulderLeftW.innerHTML = "";
                                                        tdShoulderLeftX.innerHTML = "";
                                                        tdShoulderLeftY.innerHTML = "";
                                                        tdShoulderLeftZ.innerHTML = "";
                                                        tdShoulderLeftRX.innerHTML = "";
                                                        tdShoulderLeftRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdShoulderLeftW.innerHTML = splitXY[1]; // Shoulder Left W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdShoulderLeftX.innerHTML = splitXY[2]; // Shoulder Left X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdShoulderLeftY.innerHTML = splitXY[3]; // Shoulder Left Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdShoulderLeftZ.innerHTML = splitXY[4]; // Shoulder Left Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdShoulderLeftRX.innerHTML = splitXY[5]; // Shoulder Left RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdShoulderLeftRY.innerHTML = splitXY[6]; // Shoulder Left RY value
                                                        }

                                                    }
                                                    else if (splitXY[0] == "5") { // Get Elbow Left   Point
                                                        tdElbowLeftJointID.innerHTML = splitXY[0]; // Elbow Left  Joint value
                                                        tdElbowLeftW.innerHTML = "";
                                                        tdElbowLeftX.innerHTML = "";
                                                        tdElbowLeftY.innerHTML = "";
                                                        tdElbowLeftZ.innerHTML = "";
                                                        tdElbowLeftRX.innerHTML = "";
                                                        tdElbowLeftRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdElbowLeftW.innerHTML = splitXY[1]; // Elbow Left W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdElbowLeftX.innerHTML = splitXY[2]; // Elbow Left X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdElbowLeftY.innerHTML = splitXY[3]; // Elbow Left Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdElbowLeftZ.innerHTML = splitXY[4]; // Elbow Left Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdElbowLeftRX.innerHTML = splitXY[5]; // Elbow Left RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdElbowLeftRY.innerHTML = splitXY[6]; // Elbow Left RY value
                                                        }

                                                    }
                                                    else if (splitXY[0] == "6") { // Get Wrist Left   Point
                                                        tdWristLeftJointID.innerHTML = splitXY[0]; // Wrist Left  Joint value
                                                        tdWristLeftW.innerHTML = "";
                                                        tdWristLeftX.innerHTML = "";
                                                        tdWristLeftY.innerHTML = "";
                                                        tdWristLeftZ.innerHTML = "";
                                                        tdWristLeftRX.innerHTML = "";
                                                        tdWristLeftRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdWristLeftW.innerHTML = splitXY[1]; // Wrist Left W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdWristLeftX.innerHTML = splitXY[2]; // Wrist Left X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdWristLeftY.innerHTML = splitXY[3]; // Wrist Left Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdWristLeftZ.innerHTML = splitXY[4]; // Wrist Left Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdWristLeftRX.innerHTML = splitXY[5]; // Wrist Left RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdWristLeftRY.innerHTML = splitXY[6]; // Wrist Left RY value
                                                        }

                                                    }
                                                    else if (splitXY[0] == "7") { // Get Hand Left   Point
                                                        tdHandLeftJointID.innerHTML = splitXY[0]; // Hand Left  Joint value
                                                        tdHandLeftW.innerHTML = "";
                                                        tdHandLeftX.innerHTML = "";
                                                        tdHandLeftY.innerHTML = "";
                                                        tdHandLeftZ.innerHTML = "";
                                                        tdHandLeftRX.innerHTML = "";
                                                        tdHandLeftRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdHandLeftW.innerHTML = splitXY[1]; // Hand Left W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdHandLeftX.innerHTML = splitXY[2]; // Hand Left X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdHandLeftY.innerHTML = splitXY[3]; // Hand Left Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdHandLeftZ.innerHTML = splitXY[4]; // Hand Left Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdHandLeftRX.innerHTML = splitXY[5]; // Hand Left RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdHandLeftRY.innerHTML = splitXY[6]; // Hand Left RY value
                                                        }

                                                    }
                                                    else if (splitXY[0] == "8") { // Get Shoulder Right   Point
                                                        tdShoulderRightJointID.innerHTML = splitXY[0]; // Shoulder Right  Joint value
                                                        tdShoulderRightW.innerHTML = "";
                                                        tdShoulderRightX.innerHTML = "";
                                                        tdShoulderRightY.innerHTML = "";
                                                        tdShoulderRightZ.innerHTML = "";
                                                        tdShoulderRightRX.innerHTML = "";
                                                        tdShoulderRightRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdShoulderRightW.innerHTML = splitXY[1]; // Shoulder Right W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdShoulderRightX.innerHTML = splitXY[2]; // Shoulder Right X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdShoulderRightY.innerHTML = splitXY[3]; // Shoulder Right Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdShoulderRightZ.innerHTML = splitXY[4]; // Shoulder Right Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdShoulderRightRX.innerHTML = splitXY[5]; // Shoulder Right RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdShoulderRightRY.innerHTML = splitXY[6]; // Shoulder Right RY value
                                                        }
                                                    }
                                                    else if (splitXY[0] == "9") { // Get Elbow Right   Point
                                                        tdElbowRightJointID.innerHTML = splitXY[0]; // Elbow Right  Joint value
                                                        tdElbowRightW.innerHTML = "";
                                                        tdElbowRightX.innerHTML = "";
                                                        tdElbowRightY.innerHTML = "";
                                                        tdElbowRightZ.innerHTML = "";
                                                        tdElbowRightRX.innerHTML = "";
                                                        tdElbowRightRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdElbowRightW.innerHTML = splitXY[1]; // Elbow Right W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdElbowRightX.innerHTML = splitXY[2]; // Elbow Right X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdElbowRightY.innerHTML = splitXY[3]; // Elbow Right Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdElbowRightZ.innerHTML = splitXY[4]; // Elbow Right Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdElbowRightRX.innerHTML = splitXY[5]; // Elbow Right RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdElbowRightRY.innerHTML = splitXY[6]; // Elbow Right RY value
                                                        }
                                                    }
                                                    else if (splitXY[0] == "10") { // Get Wrist Right   Point
                                                        tdWristRightJointID.innerHTML = splitXY[0]; // Wrist Right  Joint value
                                                        tdWristRightW.innerHTML = "";
                                                        tdWristRightX.innerHTML = "";
                                                        tdWristRightY.innerHTML = "";
                                                        tdWristRightZ.innerHTML = "";
                                                        tdWristRightRX.innerHTML = "";
                                                        tdWristRightRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdWristRightW.innerHTML = splitXY[1]; // Wrist Right W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdWristRightX.innerHTML = splitXY[2]; // Wrist Right X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdWristRightY.innerHTML = splitXY[3]; // Wrist Right Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdWristRightZ.innerHTML = splitXY[4]; // Wrist Right Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdWristRightRX.innerHTML = splitXY[5]; // Wrist Right RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdWristRightRY.innerHTML = splitXY[6]; // Wrist Right RY value
                                                        }
                                                    }
                                                    else if (splitXY[0] == "11") { // Get Hand Right   Point
                                                        tdHandRightJointID.innerHTML = splitXY[0]; // Hand Right  Joint value
                                                        tdHandRightW.innerHTML = "";
                                                        tdHandRightX.innerHTML = "";
                                                        tdHandRightY.innerHTML = "";
                                                        tdHandRightZ.innerHTML = "";
                                                        tdHandRightRX.innerHTML = "";
                                                        tdHandRightRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdHandRightW.innerHTML = splitXY[1]; // Hand Right W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdHandRightX.innerHTML = splitXY[2]; // Hand Right X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdHandRightY.innerHTML = splitXY[3]; // Hand Right Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdHandRightZ.innerHTML = splitXY[4]; // Hand Right Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdHandRightRX.innerHTML = splitXY[5]; // Hand Right RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdHandRightRY.innerHTML = splitXY[6]; // Hand Right RY value
                                                        }
                                                    }
                                                    else if (splitXY[0] == "12") { // Get Hip Left  Point
                                                        tdHipLeftJointID.innerHTML = splitXY[0]; // Hip Left  Joint value
                                                        tdHipLeftW.innerHTML = "";
                                                        tdHipLeftX.innerHTML = "";
                                                        tdHipLeftY.innerHTML = "";
                                                        tdHipLeftZ.innerHTML = "";
                                                        tdHipLeftRX.innerHTML = "";
                                                        tdHipLeftRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdHipLeftW.innerHTML = splitXY[1]; // Hip Left W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdHipLeftX.innerHTML = splitXY[2]; // Hip Left X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdHipLeftY.innerHTML = splitXY[3]; // Hip Left Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdHipLeftZ.innerHTML = splitXY[4]; // Hip Left Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdHipLeftRX.innerHTML = splitXY[5]; // Hip Left RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdHipLeftRY.innerHTML = splitXY[6]; // Hip Left RY value
                                                        }
                                                    }
                                                    else if (splitXY[0] == "13") { // Get Knee Left  Point
                                                        tdKneeLeftJointID.innerHTML = splitXY[0]; // Knee Left  Joint value
                                                        tdKneeLeftW.innerHTML = "";
                                                        tdKneeLeftX.innerHTML = "";
                                                        tdKneeLeftY.innerHTML = "";
                                                        tdKneeLeftZ.innerHTML = "";
                                                        tdKneeLeftRX.innerHTML = "";
                                                        tdKneeLeftRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdKneeLeftW.innerHTML = splitXY[1]; // Knee Left W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdKneeLeftX.innerHTML = splitXY[2]; // Knee Left X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdKneeLeftY.innerHTML = splitXY[3]; // Knee Left Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdKneeLeftZ.innerHTML = splitXY[4]; // Knee Left Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdKneeLeftRX.innerHTML = splitXY[5]; // Knee Left RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdKneeLeftRY.innerHTML = splitXY[6]; // Knee Left RY value
                                                        }
                                                    }
                                                    else if (splitXY[0] == "14") { // Get Ankle Left  Point
                                                        tdAnkleLeftJointID.innerHTML = splitXY[0]; // Ankle Left  Joint value
                                                        tdAnkleLeftW.innerHTML = "";
                                                        tdAnkleLeftX.innerHTML = "";
                                                        tdAnkleLeftY.innerHTML = "";
                                                        tdAnkleLeftZ.innerHTML = "";
                                                        tdAnkleLeftRX.innerHTML = "";
                                                        tdAnkleLeftRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdAnkleLeftW.innerHTML = splitXY[1]; // Ankle Left W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdAnkleLeftX.innerHTML = splitXY[2]; // Ankle Left X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdAnkleLeftY.innerHTML = splitXY[3]; // Ankle Left Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdAnkleLeftZ.innerHTML = splitXY[4]; // Ankle Left Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdAnkleLeftRX.innerHTML = splitXY[5]; // Ankle Left RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdAnkleLeftRY.innerHTML = splitXY[6]; // Ankle Left RY value
                                                        }
                                                    }
                                                    else if (splitXY[0] == "15") { // Get Foot Left  Point
                                                        tdFootLeftJointID.innerHTML = splitXY[0]; // Foot Left  Joint value
                                                        tdFootLeftW.innerHTML = "";
                                                        tdFootLeftX.innerHTML = "";
                                                        tdFootLeftY.innerHTML = "";
                                                        tdFootLeftZ.innerHTML = "";
                                                        tdFootLeftRX.innerHTML = "";
                                                        tdFootLeftRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdFootLeftW.innerHTML = splitXY[1]; // Foot Left W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdFootLeftX.innerHTML = splitXY[2]; // Foot Left X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdFootLeftY.innerHTML = splitXY[3]; // Foot Left Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdFootLeftZ.innerHTML = splitXY[4]; // Foot Left Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdFootLeftRX.innerHTML = splitXY[5]; // Foot Left RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdFootLeftRY.innerHTML = splitXY[6]; // Foot Left RY value
                                                        }
                                                    }
                                                    else if (splitXY[0] == "16") { // Get Hip Right  Point
                                                        tdHipRightJointID.innerHTML = splitXY[0]; // Hip Right  Joint value
                                                        tdHipRightW.innerHTML = "";
                                                        tdHipRightX.innerHTML = "";
                                                        tdHipRightY.innerHTML = "";
                                                        tdHipRightZ.innerHTML = "";
                                                        tdHipRightRX.innerHTML = "";
                                                        tdHipRightRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdHipRightW.innerHTML = splitXY[1]; // Hip Right W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdHipRightX.innerHTML = splitXY[2]; // Hip Right X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdHipRightY.innerHTML = splitXY[3]; // Hip Right Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdHipRightZ.innerHTML = splitXY[4]; // Hip Right Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdHipRightRX.innerHTML = splitXY[5]; // Hip Right RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdHipRightRY.innerHTML = splitXY[6]; // Hip Right RY value
                                                        }
                                                    }
                                                    else if (splitXY[0] == "17") { // Get Knee Right  Point
                                                        tdKneeRightJointID.innerHTML = splitXY[0]; // Knee Right  Joint value
                                                        tdKneeRightW.innerHTML = "";
                                                        tdKneeRightX.innerHTML = "";
                                                        tdKneeRightY.innerHTML = "";
                                                        tdKneeRightZ.innerHTML = "";
                                                        tdKneeRightRX.innerHTML = "";
                                                        tdKneeRightRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdKneeRightW.innerHTML = splitXY[1]; // Knee Right W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdKneeRightX.innerHTML = splitXY[2]; // Knee Right X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdKneeRightY.innerHTML = splitXY[3]; // Knee Right Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdKneeRightZ.innerHTML = splitXY[4]; // Knee Right Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdKneeRightRX.innerHTML = splitXY[5]; // Knee Right RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdKneeRightRY.innerHTML = splitXY[6]; // Knee Right RY value
                                                        }
                                                    }
                                                    else if (splitXY[0] == "18") { // Get Ankle Right  Point
                                                        tdAnkleRightJointID.innerHTML = splitXY[0]; // Ankle Right  Joint value
                                                        tdAnkleRightW.innerHTML = "";
                                                        tdAnkleRightX.innerHTML = "";
                                                        tdAnkleRightY.innerHTML = "";
                                                        tdAnkleRightZ.innerHTML = "";
                                                        tdAnkleRightRX.innerHTML = "";
                                                        tdAnkleRightRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdAnkleRightW.innerHTML = splitXY[1]; // Ankle Right W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdAnkleRightX.innerHTML = splitXY[2]; // Ankle Right X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdAnkleRightY.innerHTML = splitXY[3]; // Ankle Right Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdAnkleRightZ.innerHTML = splitXY[4]; // Ankle Right Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdAnkleRightRX.innerHTML = splitXY[5]; // Ankle Right RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdAnkleRightRY.innerHTML = splitXY[6]; // Ankle Right RY value
                                                        }
                                                    }
                                                    else if (splitXY[0] == "19") { // Get Foot Right  Point
                                                        tdFootRightJointID.innerHTML = splitXY[0]; // Foot Right  Joint value
                                                        tdFootRightW.innerHTML = "";
                                                        tdFootRightX.innerHTML = "";
                                                        tdFootRightY.innerHTML = "";
                                                        tdFootRightZ.innerHTML = "";
                                                        tdFootRightRX.innerHTML = "";
                                                        tdFootRightRY.innerHTML = "";

                                                        if (splitXY.length > 1) {
                                                            tdFootRightW.innerHTML = splitXY[1]; // Foot Right W value
                                                        }

                                                        if (splitXY.length > 2) {
                                                            tdFootRightX.innerHTML = splitXY[2]; // Foot Right X value
                                                        }

                                                        if (splitXY.length > 3) {
                                                            tdFootRightY.innerHTML = splitXY[3]; // Foot Right Y value
                                                        }

                                                        if (splitXY.length > 4) {
                                                            tdFootRightZ.innerHTML = splitXY[4]; // Foot Right Z value
                                                        }

                                                        if (splitXY.length > 5) {
                                                            tdFootRightRX.innerHTML = splitXY[5]; // Foot Right RX value
                                                        }

                                                        if (splitXY.length > 6) {
                                                            tdFootRightRY.innerHTML = splitXY[6]; // Foot Right RY value
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }

                            }
                        }
                    }
                }
            }
        }
    } catch (ex) {
        Log(ex, "ERROR");
    }
};

// this method is call when connection become close
function WSonClose() {
    try {
        var btnConnect = document.getElementById("btnConnect"); // Find button control
        btnConnect.value = "Connect"; // Change button Text
        Log("Connection closed.", "ERROR");

    } catch (ex) {
        Log(ex, "ERROR");
    }
};

// this method is call when any error occour in websocket
function WSonError() {
    try {
        // Error on websocket        
        Log("Error in Web Socket.", "ERROR");
    } catch (ex) {
        Log(ex, "ERROR");
    }
};


// This methos is used to authincate user with web socket server
function AuthincateUser() {
    try {
        var txtUserName = document.getElementById("txtUserName"); // find user name textbox
        var txtPassword = document.getElementById("txtPassword"); // find password textbox
        var EncryptedUserName = Encryption(txtUserName.value);  // Encrypt User name
        var EncryptedPassword = Encryption(txtPassword.value);  // Encrypt Password
        var UsPsd = "4\n" + EncryptedUserName + "\n" + EncryptedPassword;   //make formated string to send encrypted user name password to send websocket server        
        ws.send(UsPsd); // send username password to websocket server for authincation
    } catch (ex) {
        Log(ex, "ERROR");
    }
}

// this method is used to write a log
function Log(Text, MessageType) {
    try {
        if (MessageType == "OK") Text = "<span style='color: green;'>" + Text + "</span>"; // if message type is ok then change text color to green
        if (MessageType == "ERROR") Text = "<span style='color: red;'>" + Text + "</span>"; // if message type is Error then change text color to Red
        LogContainer.innerHTML = Text; //LogContainer.innerHTML + Text + "<br />";  // Display text      
        LogContainer.scrollTop = LogContainer.scrollHeight; // set focus at bottom
    } catch (ex) {
        Log(ex, "ERROR");
    }
};

// This method is used to encrypt the data
function Encryption(strData) {
    try {

        var EncryptedString = "";
        var totalPairs = parseInt(strData.length / 4);  // Count number of pairs each pair contain 4 characters
        var RemainingChars = strData.length % 4;        // Get remaining character

        // Add Spaces to fill the length
        if (parseInt(RemainingChars) > 0) {
            totalPairs = parseInt(totalPairs) + 1;
            if (parseInt(RemainingChars) == 1) {
                strData = strData + "   ";  // If reamining character is 1 then add 3 spaces to complete pair
            }
            else if (parseInt(RemainingChars) == 2) {
                strData = strData + "  "; // If reamining character is 2 then add 2 spaces to complete pair
            }
            else if (parseInt(RemainingChars) == 3) {
                strData = strData + " ";    // If reamining character is 3 then add 1 spaces to complete pair
            }
        }

        // trim 4 characters from string and encrypt it
        for (i = 0; i < totalPairs; i++) {
            k = i * 4;
            l = (i + 1) * 4;
            var pairString = strData.substring(k, l);
            // Change Character locations with 3rd number to 1st, 1st number to 2nd, 4th number to 2nd and 2nd Number to 4th position
            EncryptedString = EncryptedString + pairString.charAt(2) + pairString.charAt(0) + pairString.charAt(3) + pairString.charAt(1);
        }
        return EncryptedString; // return encrypted string

    } catch (ex) {
        Log(ex, "ERROR");
    }
}

// This method is used to connect and disconnet with the websocket server
function ConnectDisConnect() {
    try {
        var btnConnect = document.getElementById("btnConnect"); // Fiind Button Control
        if (btnConnect.value == "Connect") {
            btnConnect.value = "Disconnect";    // Change button text
            var txtServerURL = document.getElementById("txtServerURL"); // Find server url textbox
            WSConnection(txtServerURL.value);   // Used to open a connection
        }
        else {
            ws.close();
        }
    } catch (ex) {
        Log(ex, "ERROR");
    }
}

// this method is used to Clear the Log
function ClearLog() {
    try {
        var LogContainer = document.getElementById("LogContainer"); // find log container div
        LogContainer.innerHTML = "";    // clear all text
        var canvas = document.getElementById('myDrawing');
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        //Clearing Head Joints Vaiables
        tdHeadJointID.innerHTML = "";
        tdHeadW.innerHTML = "";
        tdHeadX.innerHTML = "";
        tdHeadY.innerHTML = "";
        tdHeadZ.innerHTML = "";
        tdHeadRX.innerHTML = "";
        tdHeadRY.innerHTML = "";

        //Clearing Neck Joints Vaiables
        tdNeckJointID.innerHTML = "";
        tdNeckW.innerHTML = "";
        tdNeckX.innerHTML = "";
        tdNeckY.innerHTML = "";
        tdNeckZ.innerHTML = "";
        tdNeckRX.innerHTML = "";
        tdNeckRY.innerHTML = "";

        // Clearing Spine Joints Vaiables
        tdSpineJointID.innerHTML = "";
        tdSpineW.innerHTML = "";
        tdSpineX.innerHTML = "";
        tdSpineY.innerHTML = "";
        tdSpineZ.innerHTML = "";
        tdSpineRX.innerHTML = "";
        tdSpineRY.innerHTML = "";

        // Clearing HipCenter Joints Vaiables
        tdHipCenterJointID.innerHTML = "";
        tdHipCenterW.innerHTML = "";
        tdHipCenterX.innerHTML = "";
        tdHipCenterY.innerHTML = "";
        tdHipCenterZ.innerHTML = "";
        tdHipCenterRX.innerHTML = "";
        tdHipCenterRY.innerHTML = "";

        // Clearing Shoulder Left Joints Vaiables
        tdShoulderLeftJointID.innerHTML = "";
        tdShoulderLeftW.innerHTML = "";
        tdShoulderLeftX.innerHTML = "";
        tdShoulderLeftY.innerHTML = "";
        tdShoulderLeftZ.innerHTML = "";
        tdShoulderLeftRX.innerHTML = "";
        tdShoulderLeftRY.innerHTML = "";

        // Clearing Elbow Left Joints Vaiables
        tdElbowLeftJointID.innerHTML = "";
        tdElbowLeftW.innerHTML = "";
        tdElbowLeftX.innerHTML = "";
        tdElbowLeftY.innerHTML = "";
        tdElbowLeftZ.innerHTML = "";
        tdElbowLeftRX.innerHTML = "";
        tdElbowLeftRY.innerHTML = "";

        // Clearing Wrist Left Joints Vaiables
        tdWristLeftJointID.innerHTML = "";
        tdWristLeftW.innerHTML = "";
        tdWristLeftX.innerHTML = "";
        tdWristLeftY.innerHTML = "";
        tdWristLeftZ.innerHTML = "";
        tdWristLeftRX.innerHTML = "";
        tdWristLeftRY.innerHTML = "";

        // Clearing Hand Left Joints Vaiables
        tdHandLeftJointID.innerHTML = "";
        tdHandLeftW.innerHTML = "";
        tdHandLeftX.innerHTML = "";
        tdHandLeftY.innerHTML = "";
        tdHandLeftZ.innerHTML = "";
        tdHandLeftRX.innerHTML = "";
        tdHandLeftRY.innerHTML = "";


        // Clearing Shoulder Right Joints Vaiables
        tdShoulderRightJointID.innerHTML = "";
        tdShoulderRightW.innerHTML = "";
        tdShoulderRightX.innerHTML = "";
        tdShoulderRightY.innerHTML = "";
        tdShoulderRightZ.innerHTML = "";
        tdShoulderRightRX.innerHTML = "";
        tdShoulderRightRY.innerHTML = "";

        // Clearing Elbow Right Joints Vaiables
        tdElbowRightJointID.innerHTML = "";
        tdElbowRightW.innerHTML = "";
        tdElbowRightX.innerHTML = "";
        tdElbowRightY.innerHTML = "";
        tdElbowRightZ.innerHTML = "";
        tdElbowRightRX.innerHTML = "";
        tdElbowRightRY.innerHTML = "";

        // Clearing Wrist Right Joints Vaiables
        tdWristRightJointID.innerHTML = "";
        tdWristRightW.innerHTML = "";
        tdWristRightX.innerHTML = "";
        tdWristRightY.innerHTML = "";
        tdWristRightZ.innerHTML = "";
        tdWristRightRX.innerHTML = "";
        tdWristRightRY.innerHTML = "";

        // Clearing Wrist Right Joints Vaiables
        tdHandRightJointID.innerHTML = "";
        tdHandRightW.innerHTML = "";
        tdHandRightX.innerHTML = "";
        tdHandRightY.innerHTML = "";
        tdHandRightZ.innerHTML = "";
        tdHandRightRX.innerHTML = "";
        tdHandRightRY.innerHTML = "";

        // Clearing Hip Left Joints Vaiables
        tdHipLeftJointID.innerHTML = "";
        tdHipLeftW.innerHTML = "";
        tdHipLeftX.innerHTML = "";
        tdHipLeftY.innerHTML = "";
        tdHipLeftZ.innerHTML = "";
        tdHipLeftRX.innerHTML = "";
        tdHipLeftRY.innerHTML = "";

        // Clearing Knee Left Joints Vaiables
        tdKneeLeftJointID.innerHTML = "";
        tdKneeLeftW.innerHTML = "";
        tdKneeLeftX.innerHTML = "";
        tdKneeLeftY.innerHTML = "";
        tdKneeLeftZ.innerHTML = "";
        tdKneeLeftRX.innerHTML = "";
        tdKneeLeftRY.innerHTML = "";

        // Clearing Ankle Left Joints Vaiables
        tdAnkleLeftJointID.innerHTML = "";
        tdAnkleLeftW.innerHTML = "";
        tdAnkleLeftX.innerHTML = "";
        tdAnkleLeftY.innerHTML = "";
        tdAnkleLeftZ.innerHTML = "";
        tdAnkleLeftRX.innerHTML = "";
        tdAnkleLeftRY.innerHTML = "";

        // Clearing Foot Left Joints Vaiables
        tdFootLeftJointID.innerHTML = "";
        tdFootLeftW.innerHTML = "";
        tdFootLeftX.innerHTML = "";
        tdFootLeftY.innerHTML = "";
        tdFootLeftZ.innerHTML = "";
        tdFootLeftRX.innerHTML = "";
        tdFootLeftRY.innerHTML = "";

        // Clearing Hip Right Joints Vaiables
        tdHipRightJointID.innerHTML = "";
        tdHipRightW.innerHTML = "";
        tdHipRightX.innerHTML = "";
        tdHipRightY.innerHTML = "";
        tdHipRightZ.innerHTML = "";
        tdHipRightRX.innerHTML = "";
        tdHipRightRY.innerHTML = "";

        // Clearing Knee Right Joints Vaiables
        tdKneeRightJointID.innerHTML = "";
        tdKneeRightW.innerHTML = "";
        tdKneeRightX.innerHTML = "";
        tdKneeRightY.innerHTML = "";
        tdKneeRightZ.innerHTML = "";
        tdKneeRightRX.innerHTML = "";
        tdKneeRightRY.innerHTML = "";

        // Clearing Ankle Right Joints Vaiables
        tdAnkleRightJointID.innerHTML = "";
        tdAnkleRightW.innerHTML = "";
        tdAnkleRightX.innerHTML = "";
        tdAnkleRightY.innerHTML = "";
        tdAnkleRightZ.innerHTML = "";
        tdAnkleRightRX.innerHTML = "";
        tdAnkleRightRY.innerHTML = "";

        // Clearing Foot Right Joints Vaiables
        tdFootRightJointID.innerHTML = "";
        tdFootRightW.innerHTML = "";
        tdFootRightX.innerHTML = "";
        tdFootRightY.innerHTML = "";
        tdFootRightZ.innerHTML = "";
        tdFootRightRX.innerHTML = "";
        tdFootRightRY.innerHTML = "";

    } catch (ex) {
        Log(ex, "ERROR");
    }
}

